import { ref, computed } from 'vue';
import { UUID } from '@/util/rnd.js';
import { keydownCondPairs } from '../common.js';
import { picState } from './use-task.js';
import { selectLayer, useLayerCommon } from './use-layer-common.js';

export const labelSelectorProps = ref({ visible: false, style: {} });

export const lastSelectIndex = ref(0);
export const switchable = computed(() => ({
  prev: 0 < lastSelectIndex.value,
  next: lastSelectIndex.value + 1 < picState.value.layers.length,
}));

export function SwitchedLayer(sign) {
  return picState.value.layers[ lastSelectIndex.value + sign ];
};

export function useLabelSelector() {
  labelSelectorProps.value.visible = true;
}

/** @returns {import('../@types/index.js').Layer} */
export const Layer = () => ({
  id: UUID(),
  index: -1,
  label: void 0,
  color: 'transparent',
});

export default function useLayer() {
  keydownCondPairs.push(
    [
      event => 'a' == event.key && event.ctrlKey,
      () => selectLayer('switch', 'all')
    ],
  );

  useLayerCommon('layers');
}
